<template>
    <el-dialog v-model="showDialog" :title="props.edit.type=='add'?'添加分类':'修改分类'" @close="close" style="width: 30%">
            <el-form ref="dataForm" :rules="rules" :model="form" label-width="100px" align="center">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item  label="选择父节点">
                    <el-tree-select
                            v-model="form.parentName"
                            :data="dataSource"
                            check-strictly
                            :render-after-expand="false"
                            @node-click="handleNodeClick"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button v-show='props.edit.type=="add"' type="primary"  @click="add">添加</el-button>
                    <el-button v-show='props.edit.type=="add"' type="primary"  @click="reset">重置</el-button>
                    <el-button v-show="props.edit.type=='update'" type="primary"  @click="update">更新</el-button>
                    <el-button @click="close" type="primary" >取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    const  emits = defineEmits(['close','reload'])
    let dataForm = ref(null)
    let props = defineProps(['edit','dataSource'])
    let showDialog = ref(false)
    let form = reactive({})
    const rules = reactive({
        name: [{ required: true, message: '请输入菜单名', trigger: 'blur' },],
        path: [{required: true,message: '请输入路径', trigger: 'blur'},],
    })
    const defaultProps = {
        children: 'children',
        label: 'name',
        id:"id"
    }
    let dataSource = reactive([])

    onBeforeUpdate(function () {
        if(showDialog.value == true){
            if(props.edit.type=='update'){
                let nodeData = props.edit.node.data
                let parentData = props.edit.node.parent
                if(parentData){
                    form.parentName = parentData.data.name
                }
                for(let key in nodeData){
                     form[key] = nodeData[key]
                }
            }else if(props.edit.type=="add"){
                for(let key in form){
                    delete form[key]
                }
             }
            dataSource.length = 0

           let tr = transToTreeSelect(props.dataSource)

            dataSource.push(...tr)
        }
    })
    function transToTreeSelect(nodes){
        let tree = []
        nodes.forEach(e=> {
            if ((e.children && e.children.length > 0) ) {
                tree.push({
                    label: e.name, value: e.catId,catLevel:e.catLevel, children: transToTreeSelect(e.children)
                })
            }else if(e.catLevel===1||e.catLevel===1){
                tree.push({
                    label: e.name, value: e.catId,catLevel:e.catLevel
                })
            }
        })
        return tree;
    }
    function close(){
        showDialog.value = false
        dataForm.value.resetFields()//重置表单校验
        for(let key in form){
            delete form[key]
        }
    }
    function reset(){
        for(let key in form){
            delete form[key]
        }
    }

    function add(){
        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/category/add", form).then(resp => {
                    emits("reload")
                    showDialog.value = false
                    ElMessage({message: '添加成功！', type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！', type: 'error'})
            }
        })
    }
    function update(){
        dataForm.value.validate((valid, fields) => {
            if (valid) {
                request.post("/api/category/update", form).then(resp => {
                    emits("reload")
                    showDialog.value = false
                    ElMessage({message: '修改成功！', type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！', type: 'error'})
            }
        })
    }

    function handleNodeClick (node){
        form.parentCid = node.value
        form.catLevel = node.catLevel + 1
        form.parentName = node.label
    }

    defineExpose({showDialog})
</script>

<style scoped>

</style>